<template>
		<view class="location">
			<view class="page" style="text-align: center;position: relative;">
				<navigator @click="navBack" class="return-arrow">
					<img class="return-img" src="../../static/arrow.png">
				</navigator>
				<view class="service-list">会员信息</view>		
				<view class="content">
				</view>
			</view>
			<view class="member">
				<view class="member-box van-cell-group" >
					<view class="van-cell">
					<img src="../../static/user-name.png">
						<label class="van-cell_title">姓名:</label>
						<div class="van-cell_value">
							<div class="van-field_body">{{memberData.muNickName}}</div>
						</div>
					</view>
					<view class="van-cell">
							<img src="../../static/user-sex.png">
						<label class="van-cell_title">性别:</label>
						<div class="van-cell_value">
							<div class="van-field_body" v-if="memberData.muSex ==1">男</div>
							<div class="van-field_body" v-else>女</div>
						</div>
					</view>
					<view class="van-cell">
						<img src="../../static/user-tel.png">
						<label class="van-cell_title">手机号:</label>
						<div class="van-cell_value">
							<div class="van-field_body">{{memberData.muMobile}}</div>
						</div>
					</view>
					<view class="van-cell">
						<img src="../../static/user-total.png">
						<label class="van-cell_title">总消费:</label>
						<div class="van-cell_value">
							<div class="van-field_body">￥{{memberData.muTotalExpend}}</div>
						</div>
					</view>
				<!-- 	<view class="van-cell">
							<img src="../../static/user-card.png">
						<label class="van-cell_title">会员卡号:</label>
						<div class="van-cell_value">
							<div class="van-field_body">{{memberData.muCardNum}}</div>
						</div>
					</view> -->
					<view class="van-cell">
						<img src="../../static/user-yue.png">
						<label class="van-cell_title">充值余额:</label>
						<div class="van-cell_value">
							<div class="van-field_body">￥{{memberData.muAccount}}</div>
						</div>
					</view>
					<view class="van-cell">
						<img src="../../static/user-yue.png">
						<label class="van-cell_title">返利余额:</label>
						<div class="van-cell_value">
							<div class="van-field_body">￥{{userRebate}}</div>
						</div>
					</view>
					<view class="van-cell">
							<img src="../../static/user-shenfen.png">
						<label class="van-cell_title">身份:</label>
						<div class="van-cell_value">
							<div class="van-field_body">{{alName}}</div>
						</div>
					</view>
					<view class="van-cell">
						<img src="../../static/user-tag.png">
						<label class="van-cell_title">会员标签:</label>
						<div class="van-cell_value">
							<div class="van-field_body" style="overflow: scroll;"><span class="user-tag" v-for="(item,index) in memberData.muTagsInfo">{{item.spKey}}</span></div>
						</div>
					</view>
					<view class="van-cell">
							<img src="../../static/user-beizhu.png">
						<label class="van-cell_title">备注:</label>
						<div class="van-cell_value">
							<div class="van-field_body">{{memberData.muMemo}}</div>
						</div>
					</view>
					<view class="van-cell">
						<img src="../../static/user-commender.png">
						<label class="van-cell_title">推荐人:</label>
						<div class="van-cell_value">
							<div class="van-field_body">
								<div v-if="smember_data">
									{{smember_data}}
								</div>
								<div v-else>无</div>
							</div>
						</div>
					</view>
					<view class="submit-box van-cell" style="padding: 30px;">
						<button class="c-submit" @click="goEdit(memberData.mcId,memberData.muCode)" style="margin:auto;">编辑</button>
					</view>
				</view>
			</view>	
		    
		</view>	
</template>

<script>
import Vue from 'vue';
 export default {
    components: {
    },
    data() {
        return {
			memberData:[],
			alName:'',
			resultNull:false,
			smember_data:[],
			userRebate:''
        };
    },
	onLoad: function(event) {
		// 初始化列表信息
		this.params =event;
		this.getMember(this.params.mcKey,this.params.userId);
	},
    methods: {
		navBack(){
			uni.navigateBack();
		},
		goEdit(mcKey,userId){
			uni.navigateTo({
				'url': '/pages/members/member-edit?mcKey='+mcKey+'&userId='+userId
			});
		},
		getMember(mckey,userId){
			uni.showLoading({
				title: '获取信息中'
			});
			uni.request({
			url: uni.getStorageSync('api_url')+'/member/getUserInfoByUserId?mcKey='+mckey+'&userId='+userId,
			complete: (result) => {
				uni.hideLoading();
				if(result.data.code != 1){
					uni.showToast({
						title:result.data.msg
					});
				}else{
					var _that = this;
					_that.memberData = result.data.data;
					_that.getAgencyLevelName(_that.memberData.alId,_that.memberData.muId);
					if(this.memberData.muMemo=='null'||this.memberData.muMemo==null||this.memberData.muMemo==''){
						this.memberData.muMemo="暂无备注";
					}
					if(this.memberData.muCardNum=='null'||this.memberData.muCardNum==null||this.memberData.muCardNum==''){
						this.memberData.muCardNum="无会员卡";
					}
				}
				this.getMemberlist(mckey,this.memberData.muReferrerId);
				
			},
		});
	},
	getMemberlist(mckey,referrerId){
		uni.showLoading({
			title: '获取信息中'
		});
		uni.request({
			url: uni.getStorageSync('api_url')+'/member/getList?page=1&perPage=200&mcKey='+mckey,
			complete: (result) => {
				uni.hideLoading();
				if(result.data.data.count == 0){
						this.resultNull=true;
				}
				else{
					this.resultNull=false;
				}
				if(result.data.code != 1){
					uni.showToast({
						title:result.data.msg
					});
				}else{
					var that=this;
					var listData = result.data.data.data;
					var userlistData=result.data.data.data;
					userlistData.forEach(item=>{
						if(item.muCode==that.memberData.muCode){
							console.log(item.muCode);
							that.userRebate=item.waMoney-that.memberData.muAccount;
						}
					})
					  console.log(userlistData);
					 // console.log(that.memberData);
					let refName='';
					listData.forEach(function(member){
						if(referrerId == member.muCode ){
							refName=member.muNickName;			
						}
					});
					this.smember_data = refName;
				}
				
			},
		});
	},
	getAgencyLevelName(alid,muid){
		uni.request({
			url: uni.getStorageSync('api_url')+'/agencyLevel/get/'+alid+'?acKey='+muid,
			complete: (result) => {
				uni.hideLoading();
				if(result.data.code != 1){
					uni.showToast({
						title:result.data.msg
					});
				}else{
					//console.log(result.data.data);
						this.alName = result.data.data.alName
				}
				
			},
		});
	},
    }
 };
</script>

<style scoped>
	.page.members{
		    width: 96%;
		    margin: 0 auto;
	}
	.marketing-consultant span{
		    background: linear-gradient(to right bottom,#ffffff,#b582b5,#c8ccc1,#9c87bf,#ffffff);
		    font-size: 0.8rem;
		    color: #FFFFFF;
		    padding: 5px;
	}
	.member-grade{
		font-size: 0.8rem;
		background: radial-gradient(#ec4fae, transparent);
		line-height: 0.8rem;
		display: inline-block;
	}
	.member-name{
		font-size: 0.8rem;
	}
	.member-details{
		margin-left: 3rem;
		flex-grow: 1;
	}
	.img-avatar{
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		margin-left: 1rem;
	}
	.add-members{
		       position: absolute;
		       right: 10px;
		       top: 5px;
		       font-size: 12px;
		       background: linear-gradient(to right bottom,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
		       color: #ffffff;
	}

	.member-list{
		margin: 1.5rem 0;
		    border: 1px solid #6d1c79;
		    box-sizing: border-box;
			display: flex;
			padding: 20px 10px;
	}

    .location{
		width: 100%;
		background-color: #ffffff;
	}
	.location .search .content .content-box .icon{
		color:#6d1c79;
	}
	.uni-input-placeholder{
		font-size: 14px;
	}
	.search.button{
		font-size: 14px;
	}
	.results{
		text-align: center;
		color: red;
		font-size: 16px;
		margin: 20px auto;
	}
	.detail-actions uni-button {
	    font-size: 12px;
	    background: -webkit-gradient(linear,left top, right bottom,from(#fb4386),color-stop(#ec4fae),color-stop(#ce63d0),color-stop(#a377ea),to(#6488f9));
	    background: -o-linear-gradient(left top,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
	    background: linear-gradient(to right bottom,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
	    color: #ffffff;	
	}
	.member-box .submit-box uni-button {
		height:40px;
		line-height: 40px;
	}
	.member-box {
		height: 60%;
		border: 1px solid #ccc;
		margin: 10px auto;
		border-radius: 10px;
		width: 96%;
	}
	.member-box img{
		width: 20px;
		height:20px;
		margin: 8px 10px 0px 0px;
	}
		
	.member-box .box-content {
		height: auto;
		overflow: scroll;
		max-height: 100%;
	}
	.member-box .submit-box {
		position: fixed;
	}
	.member-box .qty-box {
		padding: 0 8px;
	}
	.member-box .tc-box {
		margin-bottom: 40px;
		padding-right: 8px;
	}
	.member-box .qty-box .qty-title {
		float: left;
		line-height: 35px;
		height: 35px;
	}
	.member-box .qty-box uni-input {
		float: right;
		border: none;
	}
	.member-box .van-cell {
		padding-right: 30px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: flex;
		line-height: 24px;
		position: relative;
		color: #323233;
		font-size: 14px;
		overflow: hidden;
		margin-bottom:5px;
		padding-left: 20px;
		border-bottom: 1px solid #ccc;
	}
	.member-box .van-cell:last-child{
		border-bottom: none;
	}
	.member-box .van-cell_title {
		max-width: 90px;
		height:35px;
		line-height: 35px;
	}
	.member-box .van-cell_title, 
	.member-box .van-cell_value {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    -moz-box-flex: 1;
	    flex: 1;
	}
	.member-box .van-cell_value {
		color: #969799;
		overflow: hidden;
		text-align: right;
		position: relative;
		vertical-align: middle;
	}
	.member-box .van-cell_select {
		overflow: hidden;
		text-align: right;
		position: relative;
		vertical-align: middle;
		height: 35px;
		width: 110px;
		color: #000;
		border-color: #969799;
		background: #fff;
	}
	.member-box uni-textarea {
		max-height: 50px;
		text-align: left;
		border: 1px solid #969799;
	}
	.member-box .van-field_body {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-moz-box-align: center;
		align-items: center;
		height: 100%;
		color: #323233;
	}
	.member-box .van-field_control {
		border: 0;
		margin: 0;
		padding: 0;
		width: 100%;
		resize: none;
		display: block;
		color: #323233;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background-color: transparent;
		text-align: left;
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid #ccc;
		border-radius: 0;
		font-size:14px;
	}
	.member-box .uni-textarea-placeholder{
		color:#ccc;
	}
	.member-box .van-cell-required:before {
		content: "*";
		position: absolute;
		left: 1px;
		font-size: 14px;
		color: #f44;
		top: 7px;
	}
	.member-box .uni-textarea-placeholder{
		color: #ccc;
	}
		
	.member-box .uni-input-input{
		color:red;
	}
	.member-box .notes{
		clear: both;
		padding: 5px 8px;
		border: 1px dashed #00c971;
		font-size: 14px;
	}
	.member-box .van-field_tc .van-field_control{
	
	}
	.member-box .van-field_tc  uni-button{
		border-bottom: none;
		border: 1px solid #ccc;
		text-align: center;
		border-radius: 5px;
		height: 34px;
		line-height: 34px;
		font-size: 14px;
		font-weight: normal;
		background: #fff;
		color: #000;
		padding: 0 8px;
		margin: 0;
	}
	.member-box .van-field_tc .tc_active {
		background: #00c971;
		color: #fff;
		border: 1px solid #00c971;
	}
	.c-submit{
	    background: rgb(109, 28, 121);
	    color: #FFFFFF;
	    font-size: 14px;
	}
	.user-tag{
		    position: relative;
		    display: inline-block;
		    padding: 4px 10px 4px 10px;
		    border-radius: 5px;
		    margin-right: 10px;
		    color: #fff;
		    line-height: 1;
		    background: #41b883;
		    margin-bottom: 5px;
		    white-space: nowrap;
		    max-width: 100%;
	}
</style>
